
<template>
  <div class="app-container">
    <search-header
      v-show="boo.showSearch"
      :select-prop="selectProp"
      @search-action="searchAction"
    ></search-header>

    <div class="app-permission-container flex-between mb8">
      <span class="page-list-title">商家列表</span>
      <div class="action-content">
        <el-button v-hasPermi="['shop:acddShop:add']" type="primary" size="mini" @click="showDialog('store', 'add')"
        >新增</el-button>
      </div>
    </div>
    <div class="app-table-container">
      <el-table v-loading="boo.loading" :data="list" border>
        <el-table-column
          label="门店图片"
          align="center"
          key="imgUrlVos"
          prop="imgUrlVos">
          <template slot-scope="{row}">
            <rh-preview :list="row.imgUrlVos"></rh-preview>
          </template>
        </el-table-column>
        <el-table-column
          label="商家名称"
          align="center"
          key="shopName"
          prop="shopName"
          :show-overflow-tooltip="true" /> 
        <el-table-column
          label="经营地址"
          align="center"
          key="shopAddress"
          prop="shopAddress"/>
        <el-table-column
          label="负责人"
          align="center"
          key="head"
          prop="head"
          :show-overflow-tooltip="true"/>
        <el-table-column
          label="负责人电话"
          align="center"
          key="headPhone"
          prop="headPhone" />
        <el-table-column
          label="核销总计"
          align="center"
          key="cooperateShopNum"
          prop="cooperateShopNum"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          align="center"
          key="cooperateState"
          prop="cooperateState"
          :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <el-tag :type="row['cooperateState'] == 1 ? 'danger' : 'success'">
              {{ row['cooperateState'] | numToStr(dictsList, 'cooperateState') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="text" v-hasPermi="['shop:acddShop:remove']"
              icon="el-icon-delete"
              @click="deleteRow(row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="text" v-hasPermi="['shop:acddServe:pause']"
              icon="el-icon-video-pause"
              :loading="row.isControl"
              @click="controlTypeRow(row)">
              {{ row.cooperateState ? '启用' : '停用' }}
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="other.total > 0"
        :total="other.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="queryList"
      />
    </div>
    
    <dialog-normal
      ref="dialog-store"
      :dialog-prop="{
          title: dialogStore.title,
          height: '55vh',
          width: '60%',
          submit: '确定',
          close: '取消'
      }"
      @normal-submit="submitDialog('store')"
      >
      <template #dialog-content v-if="$refs[`dialog-store`] && $refs[`dialog-store`].showDialog">
        <el-form
          class="form-content"
          ref="store-form" label-position="left"
          label-width="120px">
          <el-form-item class="form-content-item" label="修理厂名称：" prop="name">
            <div class="form-val flex-normal">
              <el-input v-model="dialogStore.query['shopName']" placeholder="请输入修理厂名称" @change="searchNotList"></el-input>
            </div>
            <span class="code-desc-unit"><i class="el-icon-search"></i></span>
          </el-form-item>
          <div class="app-table-container">
            <el-table v-loading="dialogStore.loading" :data="dialogStore.list" border>
              <el-table-column
                label="序号"
                align="center"
                type="index"
                width="50"/>
              <el-table-column
                label="商家名称"
                align="center"
                key="shopName"
                prop="shopName"
                :show-overflow-tooltip="true" >
              </el-table-column>
              <el-table-column
                label="经营地址"
                align="center"
                key="shopAddress"
                prop="shopAddress"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="操作"
                align="center"
                width="120"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="{row}">
                  <el-checkbox v-model="row.isChecked"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
            <!-- <pagination
              v-show="dialogStore.total > 0"
              :total="dialogStore.total"
              :page.sync="dialogStore['query'].pageNum"
              :limit.sync="dialogStore['query'].pageSize"
              @pagination="queryShopNotlist"
            /> -->
          </div>
        </el-form>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {
  addShop, 
  controlShop,
  delShop,
  getShopList,
  getShopNotList
} from "@/api/userManage/store-shop.js";
export default {
  name: "List",
  components: {
    "search-header": () => import("@/rhComponents/searchHeader/index"),
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    'rh-preview': () => import('@/rhComponents/image-preview/index.vue')
  },
  filters: {
    numToStr(num, list, type){
      let index = list.findIndex(item => item.name == type)
      if(index == -1) return '未定义参数'
      let idx = list[index].child.findIndex(i => i.dictValue == num)
      if(idx == -1) return '---'
      return list[index].child[idx].dictLabel
    }
  },
  data() {
    return {
      selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
      boo: {
        loading: false, // 遮罩层
        multiple: true, // 非多个禁用
        showSearch: true, // 显示搜索条件
      },
      other: {
        ids: [], // 选中数组
        total: 0, //总条数
      },
      dictsList: [
        { label: "合同状态", name: "cooperateState", deptType: "status", child: [] },
      ],
      // 地块列表
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogStore: {
        title: '新建商家',
        total: 0,
        loading: false,
        list: {},
        query: {
          pageNum: 1,
          pageSize: 10000000
        }
      }
    };
  },
  mounted(){
    let _self = this
    _self.initGetDicts().then(res => {
      _self.queryList()
    })
  },
  methods: {
    async queryShopNotlist(){
      let _self = this, isSuccess = false
      _self.dialogStore.loading = true;
      await getShopNotList(_self.dialogStore.query).then((res) => {
        _self.dialogStore.list = res.rows;
        _self.dialogStore.total = res.total;
        isSuccess = true
      })
      _self.dialogStore.loading = false;
      return isSuccess
    },
    getDictItem(name){
      let item = this.dictsList.find(i => i.deptType == name)
      return item.child
    },
    searchNotList(){
      let _self = this
      _self.dialogStore.query.pageNum = 1
      _self.queryShopNotlist()
    },
    // 搜索条件查询
    searchAction(prop) {
      this.queryParams = Object.assign(this.queryParams, prop["params"]);
      this.queryParams.pageNum = 1;
      this.queryList();
    },
    /** 查询用户列表 */
    async queryList() {
      this.boo.loading = true;
      // this.queryParams.shopTypeId = '6'
      await getShopList(this.queryParams).then(res => {
        let {rows, total} = res
        this.list = rows
        this.other.total = total
      })
      this.boo.loading = false
    },
    controlTypeRow(row){
      let _self = this
      row.isControl = true
      _self.$set(row, 'isControl', true)
      controlShop({cooperateShopId: row.id}).then(res => {
        _self.queryList()
        _self.$message.success('操作成功')
      }).catch(() => {
        _self.$set(row, 'isControl', false)
      })
    },
    deleteRow(row){
      let id = row.id, _self = this
      this.$modal
        .confirm('是否确认删除？')
        .then(function () {
          return delShop(id);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          _self.queryParams.pageNum = 1
          _self.queryList();
        })
        .catch(() => {});
    },
    // 事件集合 -- 转发
    actionsMaps(ref, acion){
      let _self = this
      let actionsMap = () => {
        return new Map([
          [{ref: 'store', acion: 'add:show'}, async ()=>{
            _self.dialogStore.title = '添加商户'
            _self.dialogStore.list = [];
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'store', acion: 'submit'}, ()=>{
            let list = _self.dialogStore.list.filter(i => i.isChecked)
            let arr = list.map(i => {
              return {
                cooperateShopId: i.id
              }
            })
            if(!arr.length) {
              _self.$message.error('请至少选择一个商户')
              return _self.$refs[`dialog-${ref}`].loading = false
            }
            addShop({acddShopCooperates: arr || []}).then(res => {
              _self.queryParams.pageNum = 1
              _self.queryList()
              _self.$message.success('添加成功')
              _self.$refs[`dialog-${ref}`].showDialog = false;
            }).finally(() => {
              _self.$refs[`dialog-${ref}`].loading = false;
            })
          }]
        ])
      }
      let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
      actions.forEach(([key,value])=>value.call(this))
    },
    showDialog(ref, type, row) {
      let _self = this;
      if (_self.$refs[`${ref}-form`]) {
        this.resetForm(`${ref}-form`);
      }
      _self.$nextTick(() => {
        _self.actionsMaps(ref, `${type}:show`, row)
      })
    },
    submitDialog(ref) {
      let _self = this;
      _self.actionsMaps(ref, `submit`)
    },
  }
};
</script>
<style scoped lang="scss">
.form-content{
  .form-content-item{
    position: relative;
    .code-desc-unit{
      position: absolute;
      left: vw(400);
      top: 50%;
      transform: translateY(-50%);
      font-size: vh(13);
    }
    .code-desc-unit {
      left: vw(340);
    }
  }
  .form-title{
    margin-bottom: vh(20);
    line-height: vh(34);
    font-size: vh(13);
    color: #0003AA;
  }
  .form-val {
    width: vw(360);
    flex-wrap: nowrap;
    &.no-border{
      border: none;
    }
  }
}
</style>